<template>
  <footer class="container">
      <p>合计：<span v-text="tasks.length"></span></p>
      <p @click="$emit('clear')">清空任务</p>
  </footer>
</template>

<script>
export default {
  props: ['tasks'],
  methods: {
    // clear() {
    //   this.$emit('clear')
    // }
  }
}
</script>

<style scoped>
.container {
    width: 350px;
    background: rgb(234, 231, 231, .6);
    padding: 10px 15px 20px;
    margin: 0 auto;
}

footer {
    display: flex;
    padding: 0 5px;
    justify-content: space-between;
    font-size: 10px;
    color: rgb(184, 179, 179);
    margin-top: 10px;
}

footer>p:last-child {
    cursor: pointer;
}
</style>